<template>
  <Teleport to="body">
    <div v-if="visible" class="welcome-toast" @click="handleClose">
      <div class="toast-content" @click.stop>
        <div class="toast-glow"></div>
        <div class="toast-header">
          <div class="user-avatar">
            <span class="avatar-text">{{ username.charAt(0).toUpperCase() }}</span>
          </div>
          <div class="welcome-text">
            <h3>{{ username }}，欢迎回来！</h3>
            <p class="current-time">{{ currentTime }}</p>
          </div>
          <button class="close-btn" @click="handleClose">×</button>
        </div>
        
        <div class="toast-body">
          <div class="quote-section">
            <div class="quote-icon">💡</div>
            <p class="inspirational-quote">{{ currentQuote }}</p>
          </div>
          
          <div class="stats-mini">
            <div class="stat-item">
              <span class="stat-value">{{ todayVisits }}</span>
              <span class="stat-label">今日访问</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ totalTasks }}</span>
              <span class="stat-label">待办事项</span>
            </div>
          </div>
        </div>
        
        <div class="toast-footer">
          <button class="action-btn primary" @click="goToDashboard">
            <span>进入工作台</span>
            <div class="btn-shine"></div>
          </button>
          <button class="action-btn secondary" @click="handleClose">稍后再说</button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store'

const router = useRouter()
const authStore = useAuthStore()

const visible = ref(false)
const currentTime = ref('')
const todayVisits = ref(Math.floor(Math.random() * 50) + 10)
const totalTasks = ref(Math.floor(Math.random() * 20) + 5)

const username = computed(() => authStore.userInfo?.username || 'Admin')

const inspirationalQuotes = [
  "今天的努力是明天成功的基石！",
  "每一个不曾起舞的日子，都是对生命的辜负。",
  "成功不是终点，失败不是末日，继续前进的勇气才最可贵。",
  "你的潜力远比你想象的要大，相信自己！",
  "优秀是一种习惯，今天也要保持最佳状态。",
  "机会总是留给有准备的人，加油！",
  "每个专业的背后，都有无数次的练习。",
  "不要等待机会，而要创造机会。",
  "成功的秘诀就是每天进步一点点。",
  "今天努力挣他一个亿！",
  "定个小目标，先挣一个亿！",
  "相信自己，你比想象中更强大！"
]

const currentQuote = ref('')

const updateTime = () => {
  const now = new Date()
  const hours = now.getHours()
  const timeOfDay = hours < 12 ? '上午' : hours < 18 ? '下午' : '晚上'
  currentTime.value = `${timeOfDay} ${now.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })}`
}

const getRandomQuote = () => {
  const randomIndex = Math.floor(Math.random() * inspirationalQuotes.length)
  currentQuote.value = inspirationalQuotes[randomIndex]
}

const show = () => {
  visible.value = true
  updateTime()
  getRandomQuote()
  
  // 3秒后自动关闭
  setTimeout(() => {
    if (visible.value) {
      handleClose()
    }
  }, 8000)
}

const handleClose = () => {
  visible.value = false
}

const goToDashboard = () => {
  handleClose()
  router.push({ name: 'Dashboard' })
}

// 重置欢迎弹窗状态（用于测试）
const resetWelcomeState = () => {
  localStorage.removeItem('hasShownWelcome')
  console.log('🔄 Welcome toast state reset')
}

defineExpose({
  show,
  resetWelcomeState
})
</script>

<style scoped>
.welcome-toast {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.5s ease-out;
}

.toast-content {
  position: relative;
  width: 420px;
  max-width: 90vw;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 100%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  overflow: hidden;
  animation: slideInUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, 
    rgba(255, 0, 110, 0.1) 0%,
    rgba(131, 56, 236, 0.1) 50%,
    transparent 70%);
  animation: rotate 10s linear infinite;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: 24px 24px 16px;
  position: relative;
  z-index: 1;
}

.user-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff006e, #8338ec);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  box-shadow: 0 8px 20px rgba(131, 56, 236, 0.3);
}

.avatar-text {
  color: white;
  font-size: 24px;
  font-weight: 600;
}

.welcome-text {
  flex: 1;
}

.welcome-text h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(135deg, #ff006e, #8338ec);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.current-time {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #666;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.toast-body {
  padding: 0 24px 16px;
  position: relative;
  z-index: 1;
}

.quote-section {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.quote-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.inspirational-quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  font-weight: 500;
}

.stats-mini {
  display: flex;
  gap: 16px;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #8338ec;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.toast-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.action-btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-btn.primary {
  background: linear-gradient(135deg, #ff006e, #8338ec);
  color: white;
  box-shadow: 0 4px 15px rgba(131, 56, 236, 0.4);
}

.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(131, 56, 236, 0.6);
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.action-btn.primary:hover .btn-shine {
  left: 100%;
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #666;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 暗色主题适配 */
:global(.dark) .toast-content {
  background: linear-gradient(135deg, 
    rgba(40, 40, 40, 0.95) 0%,
    rgba(30, 30, 30, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

:global(.dark) .welcome-text h3 {
  background: linear-gradient(135deg, #06ffa5, #26cf6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:global(.dark) .current-time {
  color: #ccc;
}

:global(.dark) .quote-section {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

:global(.dark) .inspirational-quote {
  color: #e0e0e0;
}

:global(.dark) .stat-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

:global(.dark) .stat-value {
  color: #06ffa5;
}

:global(.dark) .stat-label {
  color: #ccc;
}

:global(.dark) .action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

:global(.dark) .action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}
</style> 